import * as React from 'react';
import { useState } from 'react';

const styles = {
    root: {
        width: '100vw',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column' as 'column',
        fontFamily: '"Roboto", sans-serif',
    },
    main: {
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center' as 'center',
        flexDirection: 'column' as 'column',
        background:
            'linear-gradient(135deg, #00023b 0%, #00023b 50%, #313264 100%)',
        color: 'white',
        fontSize: '1.5em',
        fontWeight: 'bold' as 'bold',
    },
    secondary: {
        height: '20vh',
        background: '#e8e8e8',
        color: 'black',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-evenly',
    },
    link: {
        textAlign: 'center' as 'center',
        width: 150,
        display: 'block',
        textDecoration: 'none',
        color: 'black',
        opacity: 0.7,
    },
    linkHovered: {
        opacity: 1,
    },
    image: {
        display: 'block',
        margin: 'auto',
        width: 50,
    },
    logo: {
        height: 100,
    },
};

const Button = ({ img, label, href }) => {
    const [hovered, setHovered] = useState(false);
    return (
        <div>
            <a
                href={href}
                style={
                    hovered
                        ? { ...styles.link, ...styles.linkHovered }
                        : styles.link
                }
                onMouseEnter={() => setHovered(true)}
                onMouseLeave={() => setHovered(false)}
            >
                <img src={img} alt={label} style={styles.image} />
                <br />
                {label}
            </a>
        </div>
    );
};

export default () =>
    process.env.NODE_ENV === 'production' ? (
        <span />
    ) : (
        <div style={styles.root}>
            <div style={styles.main}>
                <img
                    style={styles.logo}
                    src=""
                    alt="react-admin logo"
                />
                <h1>Welcome to React-admin</h1>
                <div>
                    Your application is properly configured.
                    <br />
                    Now you can add a &lt;Resource&gt; as child of
                    &lt;Admin&gt;.
                </div>
            </div>
            <div style={styles.secondary}>
                <Button
                    href="https://marmelab.com/react-admin/documentation.html"
                    img=""
                    label="Documentation"
                />
                <Button
                    href="https://github.com/marmelab/react-admin/tree/master/examples"
                    img=""
                    label="Examples"
                />
                <Button
                    href="https://stackoverflow.com/questions/tagged/react-admin"
                    img=""
                    label="Community"
                />
            </div>
        </div>
    );
